<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
  <!-- sidebar: style can be found in sidebar.less -->
  <section class="sidebar">
    <!-- Sidebar user panel -->
    <!--<div class="user-panel">-->
      <!--<div class="pull-left image">-->
        <!--<img src="assets/imgs/lte/user2-160x160.jpg" class="img-circle" alt="User Image">-->
      <!--</div>-->
      <!--<div class="pull-left info">-->
        <!--<p>Alexander Pierce</p>-->
        <!--<a href="#"><i class="fa fa-circle text-success"></i> Online</a>-->
      <!--</div>-->
    <!--</div>-->
    <!-- search form -->
    <!--<form action="#" method="get" class="sidebar-form">-->
      <!--<div class="input-group">-->
        <!--<input type="text" name="q" class="form-control" placeholder="Search...">-->
        <!--<span class="input-group-btn">-->
                <!--<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>-->
                <!--</button>-->
              <!--</span>-->
      <!--</div>-->
    <!--</form>-->
    <!-- /.search form -->
    <!-- Sidebar Menu -->
    <!-- 1-->
    <ul class="sidebar-menu">
      <li>
        <a class="sidebar-toggle text-center" data-toggle="offcanvas" style="padding: 12px 0;">
          <i class="fa fa-bars"></i>
        </a>
      </li>
    </ul>
    <ul class="sidebar-menu" id="one-admin-menu" [menus]="menus">
    </ul>


    <!-- 1.1 -->
    <!-- four level traverse -->
    <!--<ul class="sidebar-menu">-->
      <!--<template ngFor let-menu [ngForOf]="menus">-->
        <!--<li>-->
          <!--<a [routerLink]="menu.url">-->
            <!--<i [class]="menu.icon ? menu.icon : 'fa fa-home'"></i>-->
            <!--<span>{{menu.name}}</span>-->
            <!--<span class="pull-right-container" *ngIf="menu.children">-->
                <!--<i class="fa fa-angle-left pull-right"></i>-->
               <!--</span>-->
          <!--</a>-->
          <!--<ul class="treeview-menu" *ngIf="menu.children">-->
            <!--<template ngFor let-menu [ngForOf]="menu.children">-->
              <!--<li>-->
                <!--<a [routerLink]="menu.url">-->
                  <!--<i class="fa fa-link"></i>-->
                  <!--<span>{{menu.name}}</span>-->
                  <!--<span class="pull-right-container" *ngIf="menu.children">-->
                          <!--<i class="fa fa-angle-left pull-right"></i>-->
                         <!--</span>-->
                <!--</a>-->
                <!--<ul class="treeview-menu" *ngIf="menu.children">-->
                  <!--<template ngFor let-menu [ngForOf]="menu.children">-->
                    <!--<li>-->
                      <!--<a [routerLink]="menu.url">-->
                        <!--<i class="fa fa-link"></i>-->
                        <!--<span>{{menu.name}}</span>-->
                        <!--<span class="pull-right-container" *ngIf="menu.children">-->
                            <!--<i class="fa fa-angle-left pull-right"></i>-->
                           <!--</span>-->
                      <!--</a>-->
                      <!--<ul class="treeview-menu" *ngIf="menu.children">-->
                        <!--<template ngFor let-menu [ngForOf]="menu.children">-->
                          <!--<li>-->
                            <!--<a [routerLink]="menu.url">-->
                              <!--<i class="fa fa-link"></i>-->
                              <!--<span>{{menu.name}}</span>-->
                              <!--<span class="pull-right-container" *ngIf="menu.children">-->
                                            <!--<i class="fa fa-angle-left pull-right"></i>-->
                                           <!--</span>-->
                            <!--</a>-->
                            <!--<ul class="treeview-menu" *ngIf="menu.children">-->

                            <!--</ul>-->
                          <!--</li>-->
                        <!--</template>-->
                      <!--</ul>-->
                    <!--</li>-->
                  <!--</template>-->
                <!--</ul>-->
              <!--</li>-->
            <!--</template>-->
          <!--</ul>-->
        <!--</li>-->
      <!--</template>-->
    <!--</ul>-->
      <!--2 -->
      <!--<ul class="sidebar-menu">-->
      <!--<template ngFor let-menu [ngForOf]="menus">-->
        <!--<template [ngIf]="menu.children">-->
          <!--<li>-->
            <!--<a [routerLink]="menu.url">-->
              <!--<i class="fa fa-link"></i>-->
              <!--<span>{{menu.name}}</span>-->
              <!--<span class="pull-right-container">-->
                <!--<i class="fa fa-angle-left pull-right"></i>-->
               <!--</span>-->
            <!--</a>-->
            <!--<ul class="treeview-menu">-->
              <!--<template ngFor let-subMenu [ngForOf]="menu.children">-->
                <!--<li><a [routerLink]="subMenu.url">{{subMenu.name}}</a></li>-->
              <!--</template>-->
            <!--</ul>-->
          <!--</li>-->
        <!--</template>-->
        <!--<template [ngIf]="!menu.children">-->
          <!--<li><a [routerLink]="menu.url"><i class="fa fa-link"></i> <span>{{menu.name}}</span></a></li>-->
        <!--</template>-->
      <!--</template>-->
    <!--</ul>-->

      <!--3 -->
    <!--<ul class="sidebar-menu" *ngFor="let menu of menus">-->
      <!--<li class="treeview">-->
        <!--<a [routerLink]="menu.url">-->
          <!--<i class="fa fa-link"></i>-->
          <!--<span>{{menu.name}}</span>-->
          <!--<span class="pull-right-container" *ngIf="menu.children">-->
                <!--<i class="fa fa-angle-left pull-right"></i>-->
               <!--</span>-->
        <!--</a>-->
        <!--<ul class="treeview-menu" *ngIf="menu.children">-->
          <!--<template ngFor let-subMenu [ngForOf]="menu.children">-->
            <!--<li><a [routerLink]="subMenu.url">{{subMenu.name}}</a></li>-->
          <!--</template>-->
        <!--</ul>-->
      <!--</li>-->
    <!--</ul>-->
  </section>
  <!-- /.sidebar -->
</aside>
